import '@umijs/max';
import React, { useEffect, useRef } from 'react';
import { ProColumns, ProFormInstance, ProTable } from '@ant-design/pro-components';
import { Modal } from 'antd';

export type Props = {
  value: API.InterfaceInfo;
  columns: ProColumns<API.InterfaceInfo>[];
  onCancel: () => void;
  onSubmit: (values: API.InterfaceInfo) => Promise<void>;
  open: boolean;
};
const CreateModal: React.FC<Props> = (props) => {
  const { value, columns, open, onCancel, onSubmit } = props;
  const formRef = useRef<ProFormInstance>();
  // 监听点击修改行数据进行回写展示
  useEffect(() => {
    if (formRef) {
      formRef.current?.setFieldsValue(value);
    }
  }, [value]);
  return (
    <Modal title={'更新接口'} open={open} footer={null} onCancel={() => onCancel?.()}>
      <ProTable
        type={'form'}
        formRef={formRef}
        columns={columns}
        onSubmit={async (value) => onSubmit?.(value)}
      />
    </Modal>
  );
};
export default CreateModal;
